<template>
	<el-card class="layout-query">
		<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="search()">
			<el-form-item label="操作时间">
				<!-- <el-date-picker
					v-model="timelist"
					type="daterange"
					format="YYYY-MM-DD "
					value-format="YYYY-MM-DD HH:mm:ss"
          @change="gettime"
				>
				</el-date-picker> -->

				<el-date-picker
					v-model="timelist"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					format="YYYY-MM-DD "
					value-format="YYYY-MM-DD HH:mm:ss"
					end-placeholder="结束日期"
					@change="gettime"
				/>
			</el-form-item>
			<el-form-item label="业务内容">
				<el-input v-model="state.queryForm.bizInfo"></el-input>
			</el-form-item>
			<el-form-item label="操作人">
				<el-input v-model="state.queryForm.operator"></el-input>
			</el-form-item>
			<el-form-item label="操作类型">
				<el-select v-model="state.queryForm.operateType" placeholder="请选择" style="width: 100%">
					<el-option v-for="item in optionList1" :key="item" :label="item" :value="item"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button icon="Search" type="primary" @click="search()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="reset()">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>
	<el-card>
		<div style="text-align: right">
			<el-button type="primary" @click="exportHandle()">登录日志下载</el-button>
		</div>
		<el-table v-loading="state.dataListLoading" :data="dataList" stripe class="layout-table">
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
			<el-table-column prop="userName" label="操作人" header-align="center" align="center"></el-table-column>
			<el-table-column prop="module" label="所属模块" header-align="center" align="center"></el-table-column>
			<el-table-column prop="operation" label="系统功能" header-align="center" align="center"></el-table-column>
			<el-table-column prop="operateType" label="操作类型" header-align="center" align="center"></el-table-column>
			<el-table-column prop="bizInfo" label="业务内容" header-align="center" align="center">
				<template #default="{ row }">
					<el-tooltip :content="row.bizInfo" placement="top">
						<div class="multiline-ellipsis">{{ row.bizInfo }}</div>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="ip" label="请求的ip地址" header-align="center" align="center"></el-table-column>
			<el-table-column prop="status" label="请求状态" header-align="center" align="center">
				<template #default="scope">
					{{ scope.row.status === 1 ? '成功' : '失败' }}
				</template>
			</el-table-column>

			<el-table-column prop="errorMsg" label="错误信息" header-align="center" align="center" />

			<!-- <template #default="scope">
					{{ scope.row }}
				</template> -->

			<el-table-column prop="durationMs" label="耗时(ms)" header-align="center" align="center"></el-table-column>

			<el-table-column prop="createTime" label="创建日期" header-align="center" align="center"></el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.pageNum"
			:page-size="state.pageSize"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
	</el-card>
</template>
<script setup lang="ts">
import { lookupApi, querylistApi } from '@/api/system/operateLog'
import { useUserStore } from '@/store/modules/user'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
const userStore = useUserStore()
const state = reactive({
	queryForm: {
		startDate: '',
		endDate: '',
		bizInfo: '',
		operator: '',
		operateType: ''
	},
	pageNum: 1,
	pageSize: 10,
	total: 1,
	dataListLoading: false,
	keyType: '',
	keyword: null
})
const timelist = ref([])
const optionList1 = ref([])
const pickerOptions = ref({
	disabledDate(time) {
		// 禁用所有过去的日期，只允许选择当前日期及以后的时间
		return time.getTime() < Date.now()
	},
	selectableRange: '00:00:00 - 23:59:59' // 限制时间选择范围为00:00:00到23:59:59
})

interface IListDataType {
	applyResult: string
}
const gettime = val => {
	timelist.value = val || [] // 清空时重置为空数组
	state.queryForm.startDate = val[0] || ''
	state.queryForm.endDate = val[1] || ''
}
const dataList = ref<IListDataType[]>([])

const showAddDialog = ref<boolean>(false)

const getDataList = () => {
	state.dataListLoading = true

	querylistApi({
		pageNum: state.pageNum,
		pageSize: state.pageSize,
		startDate: state.queryForm.startDate,
		endDate: state.queryForm.endDate,
		bizInfo: state.queryForm.bizInfo,
		operator: state.queryForm.operator,
		operateType: state.queryForm.operateType
	}).then(res => {
		state.dataListLoading = false
		dataList.value = res.data.list || []
		state.total = res.data.total || 0
	})
}

const search = () => {
	state.pageNum = 1
	getDataList()
}

const reset = () => {
	const aa = { startDate: '', endDate: '', bizInfo: '', operator: '', operateType: '' }
	state.queryForm = { ...aa }
	state.pageNum = 1
	getDataList()
}

const selectionChangeHandle = () => {}
const sizeChangeHandle = (e: number) => {
	state.pageSize = e
	state.pageNum = 1
	getDataList()
}
const currentChangeHandle = (e: number) => {
	state.pageNum = e
	getDataList()
}

// const addSuccess = (e: any) => {
// 	showAddDialog.value = false
// 	reset()
// }

onMounted(() => {
	getDataList()
	lookupApi().then(res => {
		optionList1.value = res.data || []
	})
})

const exportHandle = () => {
	try {
		const param = {
			startTime: state.queryForm.startDate,
			endTime: state.queryForm.startDate
		}
		axios({
			method: 'post',
			url: window.location.protocol + '//' + window.location.host + '/JGBStandardWebApi' + '/api/user/exportLog',
			headers: {
				'Content-Type': 'application/json;charset=UTF-8',
				Authorization: userStore.token
			},
			data: param,
			responseType: 'blob'
		})
			.then(response => {
				ElMessage.success('操作成功，文件已开始下载')
				const blob = new Blob([response.data], {
					type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
				})
				const url = window.URL.createObjectURL(blob)
				const a = document.createElement('a')
				a.href = url
				a.download = '登录日志.xls'
				a.click()
				window.URL.revokeObjectURL(url)
			})
			.catch(error => {
				console.error('导出失败:', error)
			})
	} catch (error) {
		console.error('提交处理失败:', error.message)
		ElMessage.error(error.message)
	}
}
</script>
<style lang="scss" scoped>
.title {
	font-size: 20px;
	text-align: center;
}

.subtitle {
	font-size: 16px;
	margin: 30px 0 10px;
}

.multiline-ellipsis {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.form {
	display: flex;
	flex-wrap: wrap;

	.item {
		display: flex;
		align-items: center;
		min-width: 33.33%;

		.label {
			font-size: 14px;
			height: 30px;
			line-height: 30px;
		}

		.value {
			padding: 2px 20px 2px 5px;
			border-bottom: solid 1px #333;
			font-size: 14px;
			margin-right: 50px;
			flex: 1;
			height: 30px;
			line-height: 30px;
		}
	}
}

.form2 {
	margin-top: 20px;

	.label {
		line-height: 20px;
	}

	.value {
		border-bottom: solid 1px #333;
		font-size: 14px;
		line-height: 28px;
	}
}
</style>
